<template>
    <el-container class="mev-div-border" style="color: white">
        <el-header>
            <!--   <el-row>
                <el-col :span="12" style="color: white;text-align: left;">视点</el-col>
                <el-col :span="2" style="text-align: right;"> <i @click="addname()" size="medium" class="el-icon-circle-plus-outline" style="color: white"></i></el-col>
                &lt;!&ndash;                <el-col :span="6"> <el-button  command="ToolbarAddDataComponent" >添加</el-button></el-col>  @click="addview()"&ndash;&gt;
                <el-col :span="2" style="text-align: right;"> <i @click="close()" size="medium" class="el-icon-close" style="color: white"></i></el-col>
            </el-row>-->

            <!--  <div style="width: 100%;height: 100%;color: white;margin-top: 10px">
                <div style="width: 60%;height: 40%;float: left;text-align: left">视点管理</div>
                <div style="width: 10%;height: 40%;float: left">
                    <i @click="addname()" size="medium" class="el-icon-plus" style="color: white"></i>
                </div>
                <div style="width: 10%;height: 40%;float: left"></div>

              <div style="width: 10%;height: 40%;float: left">
                <i @click=" saveViewPosition()" size="medium" class="el-icon-document" style="color: white"></i>
              </div>
              <div style="width: 10%;height: 40%;float: left">
                <i @click="close()" size="medium" class="el-icon-close" style="color: white"></i>
              </div>
            </div>-->

            <div style="width: 100%;height: 100%;color: white;margin-top: 10px">
                <div style="width: 46%;height: 40%;float: left;text-align: left"></div>
                <div style="width: 4%;height: 40%;float: left"></div>
                <div style="width: 10%;height: 40%;float: left">
                    <i @click="addname()" size="medium" class="el-icon-plus" style="color: white"></i>
                </div>
                <div style="width: 10%;height: 40%;float: left"></div>
                <div style="width: 10%;height: 40%;float: left">
                    <i @click="saveViewPosition()" size="medium" class="el-icon-document" style="color: white"></i>
                </div>
                <div style="width: 10%;height: 40%;float: left"></div>
                <div style="width: 10%;height: 40%;float: left">
                    <i @click="close()" size="medium" class="el-icon-close" style="color: white"></i>
                </div>
            </div>
        </el-header>
        <el-scrollbar wrap-class="list" wrap-style="color: red; height:45vh;" view-class="view-box" view-style="font-weight: bold;height:100%;" :native="false">
            <!-- <div>
                <ul>
                    <li v-for="(list, index) in viewpoistioninfo" v-bind:key="list.name" v-on:click="getRowId(list.data)">
                        {{ list.name }} <el-col style="text-align: right;"> <i @click="viewpoistioninfo.splice(index, 1)" class="el-icon-close"></i></el-col>
                    </li>
                </ul>
            </div>-->
            <el-tree :data="viewpoistioninfo1" :props="defaultProps" @node-click="getRowId" :render-content="renderContent1"></el-tree>
        </el-scrollbar>
        <el-dialog title="添加视点" :visible.sync="dialogFormVisible" :append-to-body="true">
            <el-form>
                <el-form-item label="视点名称" :label-width="formLabelWidth">
                    <el-input v-model="addnemetxt" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addview()">确 定</el-button>
            </div>
        </el-dialog>
    </el-container>
</template>

<script>
export default {
    name: "ViewPointComponent",
    data() {
        return {
            /* viewpoistioninfo: [],*/
            dialogFormVisible: false,
            addnemetxt: "",
            zoomlevel:20,
            formLabelWidth: "110px",
            viewpoistioninfo1: [
                {
                    name: null,
                    data: {}
                }
            ],
            defaultProps: {
                label: "name"
            }
        };
    },
    mounted() {
        this.getViewInfo();
    },
    methods: {
        addname: function() {
            this.dialogFormVisible = true;
        },
        close: function() {
            if (this.$route.name !== "EmptyComponent") {
                this.$router.push({ name: "EmptyComponent" });
            }
        },
        updaatelevel:function()
        {
            if(window.zoomlevel != null)
            {
                this.zoomlevel = window.zoomlevel;
            }
        },
        saveViewPosition: function() {
            let flag = false;
            let that = this;
            that.$confirm("是否保存？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                flag = JavaContext.SaveViewInfo(JSON.stringify(this.viewpoistioninfo1));

                if (flag) {
                    that.$message({
                        showClose: true,
                        message: "保存成功",
                        type: "success"
                    });
                } else {
                    that.$message({
                        showClose: true,
                        message: "保存失败",
                        type: "warning"
                    });
                }
            });
        },
        addview: function() {
            this.ViewPointVisible = true;
            // 获取当前镜头位置的笛卡尔坐标
            let cameraPos = window.cesiumViewer.camera.position;

            // 获取当前坐标系标准
            let ellipsoid = window.cesiumViewer.scene.globe.ellipsoid;

            // 根据坐标系标准，将笛卡尔坐标转换为地理坐标
            let cartographic = ellipsoid.cartesianToCartographic(cameraPos);

            // 获取镜头的高度
            let height = cartographic.height;
            

            // 根据上面当前镜头的位置，获取该中心位置的经纬度坐标
            let centerLon = parseFloat(Cesium.Math.toDegrees(cartographic.longitude).toFixed(8));
            let centerLat = parseFloat(Cesium.Math.toDegrees(cartographic.latitude).toFixed(8));

            if(window.cesiumViewer.scene.mode == 2)
            {
                var res = window.cesiumViewer.camera.pickEllipsoid(new Cesium.Cartesian2(window.cesiumViewer.canvas.clientWidth /2 ,window.cesiumViewer.canvas.clientHeight /2))
                var curpos = Cesium.Ellipsoid.WGS84.cartesianToCartographic(res)


                height = window.cesiumViewer.camera.positionCartographic.height;

                centerLon = curpos.longitude * 180 / Math.PI;
                centerLat = curpos.latitude * 180 / Math.PI;
            }





            //  console.log('save camera',centerLon,centerLat)





            let option = {
                centerLon: centerLon,
                centerLat: centerLat,
                height: height,
                heading: window.cesiumViewer.camera.heading,
                pitch: window.cesiumViewer.camera.pitch,
                roll: window.cesiumViewer.camera.roll
            };
            this.viewpoistioninfo1.push({
                name: this.addnemetxt,
                data: option
            });
            this.dialogFormVisible = false;
            this.addnemetxt = "";
        },

        getRowId: function(data) {
            window.cesiumViewer.camera.flyTo({
                destination: Cesium.Cartesian3.fromDegrees(data.data.centerLon, data.data.centerLat, data.data.height),
               // orientation: new Cesium.HeadingPitchRoll(data.data.heading, data.data.pitch, data.data.roll),
               // duration:8
            });
        },
        getViewInfo() {
            let that = this;
            let str = JavaContext.ReadViewInfo();
            if (str.length > 0) {
                let pos = JSON.parse(str);
                /*this.viewpoistioninfo = pos.viewpoistion;*/
                that.viewpoistioninfo1 = pos.viewpoistion;
            }

            /*let str =
                "{\n" +
                '\t"viewpoistion": [{\n' +
                '\t\t"data": {\n' +
                '\t\t\t"heading": 6.27455877129298,\n' +
                '\t\t\t"centerLon": -51.08074873,\n' +
                '\t\t\t"roll": 6.282024688365061,\n' +
                '\t\t\t"centerLat": -46.83658949,\n' +
                '\t\t\t"pitch": -1.1476988131289723,\n' +
                '\t\t\t"height": 4143361.6785869533\n' +
                "\t\t},\n" +
                '\t\t"name": "哦明哦我去洗澡"\n' +
                "\t}],\n" +
                '\t"lastpoistion": {\n' +
                '\t\t"heading": 6.274558771292979,\n' +
                '\t\t"centerLon": -51.08074873,\n' +
                '\t\t"roll": 6.282024688365063,\n' +
                '\t\t"check": true,\n' +
                '\t\t"centerLat": -46.83658949,\n' +
                '\t\t"pitch": -1.1476988131289731,\n' +
                '\t\t"height": 4143361.67859007\n' +
                "\t}\n" +
                "}";*/

            if (str.length > 0) {
                let pos = JSON.parse(str);
                /*this.viewpoistioninfo = pos.viewpoistion;*/
                that.viewpoistioninfo1 = pos.viewpoistion;
            }
        },
        handleClose() {
            this.dialogFormVisible = false;
        },
        renderContent1: function(h, { node, data, store }) {
            return (
                <span class="custom-tree-node">
                    <span>{node.label}</span>
                    <span>
                        <el-button size="mini" type="text" on-click={() => this.deleteViewData(data)}>
                            删除
                        </el-button>
                    </span>
                </span>
            );
        },
        deleteViewData(data) {
            let that = this;
            let flag = false;
            that.$confirm("此操作将删除该数据,是否继续？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                for (let i = 0; i < that.viewpoistioninfo1.length; i++) {
                    if (that.viewpoistioninfo1[i].name === data.name) {
                        that.viewpoistioninfo1.splice(i, 1);
                        flag = JavaContext.SaveViewInfo(JSON.stringify(this.viewpoistioninfo1));
                        break;
                    }
                }

                if (flag) {
                    that.$message({
                        showClose: true,
                        message: "删除成功",
                        type: "success"
                    });
                } else {
                    that.$message({
                        showClose: true,
                        message: "删除失败",
                        type: "warning"
                    });
                }
            });
        }
    }
};
</script>
<style>
.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
}
</style>
<style scoped></style>
